<template>
	<el-form
		class="page-login"
		ref="form"
		:model="form"
		:rules="rules"
		label-width="0">
		<el-form-item
			prop="username"
			:error="usernameError"
		>
			<el-input
				v-model="form.username"
				@keyup.enter.native="enterLogin"
				placeholder="用户名">
				<i
					slot="prefix"
					class="el-icon-user el-input__icon"></i>
			</el-input>
		</el-form-item>
		<el-form-item
			prop="password"
			:error="passwordError"
		>
			<el-input
				v-model="form.password"
				@keyup.enter.native="enterLogin"
				type="password"
				placeholder="密码">
				<i
					slot="prefix"
					class="el-icon-lock el-input__icon"></i>
			</el-input>
		</el-form-item>
		<el-form-item class="forget-password">
			<el-button type="text" @click="$router.push('/forget')">忘记密码
			</el-button>
		</el-form-item>
		<el-form-item class="login-btn">
			<el-button
				type="primary"
				@click="login"
				:loading="loading"
			>
				登录
			</el-button>
		</el-form-item>
		<el-form-item class="other-container">
			<div class="oauth">
				<span style="margin-right: 10px">第三方登录</span>
				<a
					href="https://api.weibo.com/oauth2/authorize?client_id=1702430832&response_type=code&redirect_uri=http://127.0.0.1:3001/weibo"
					class="app-logo">
					<img src="@/assets/weibo.svg"></a>
				<a
					href="https://github.com/login/oauth/authorize?client_id=1e747a3a685b71b46dd1&redirect_uri=http://127.0.0.1:3001/github"
					class="app-logo">
					<img src="@/assets/github.svg">
				</a>
			</div>
			<div class="register">
				<el-link
					href="#/register"
					:underline="false"
					type="primary">
					注册账户
				</el-link>
			</div>
		</el-form-item>
	</el-form>
</template>

<script>
  /**
   *
   *
   *
   */
  export default {
    name: "login",
    data() {
      return {
        rules: {
          username: [{
            required: true,
            trigger: 'change',
            message: '请输入账号'
          }],
          password: [{
            required: true,
            trigger: 'change',
            message: '请输入密码'
          }]
        },
        form: {
          username: '',
          password: ''
        },
        usernameError: '',
        passwordError: '',
        loading: false
      }
    },
    watch: {
      'form.username'() {
        this.usernameError = ''
      },
      'form.password'() {
        this.passwordError = ''
      }
    },
    methods: {
      enterLogin() {
        if (this.form.username && this.form.password) {
          this.login()
        }
      },
      login() {
        this.$refs.form.validate(valid => {
          if (!valid) return false
          let form = this.form
          this.loading = true
          this.$axios.post('/login', {
            username: form.username,
            password: form.password
          }).then(({success, data, message}) => {
            if (success) {
              this.$message({
                type: 'success',
                message: '登录成功'
              })
              this.$store.commit('updateIsLogged', true)
              this.$store.commit('updateUserInfo', data)
              this.$router.replace({
                path: '/'
              })
            } else {
              if (/账号/.test(message)) {
                this.usernameError = message
              } else if (/密码/.test(message)) {
                this.passwordError = message
              } else {
                this.$message({
                  type: 'error',
                  message: message
                })
              }
            }
          }).finally(() => {
            this.loading = false
          })
        })
      }
    }
  }
</script>

<style lang='less'>
	.page-login {
		width: 100%;

		.el-input__prefix {
			/*left: 10px;*/
		}

		.forget-password {
			margin: 16px 0 !important;

			.el-form-item__content {
				text-align: right;
			}
		}

		.login-btn {
			.el-button {
				width: 100%;
			}
		}

		.other-container {
			.el-form-item__content {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;

				.oauth {
					flex-grow: 1;
					flex-shrink: 1;
					color: #999;
					display: flex;
					align-items: center;
					line-height: 32px;

					span {
						position: relative;
						top: -4px;
					}
				}

				.register {
					flex-grow: 0;
					flex-shrink: 0;
				}
			}
		}

		.app-logo {
			cursor: pointer;
			font-size: 0;
			line-height: 32px;
			height: 32px;

			& + .app-logo {
				margin-left: 12px;
			}

			img {
				width: 24px;
				height: 24px;
			}
		}
	}
</style>
